{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<form class="layui-form p-4">
    <h3 class="pb-3">功能菜单/节点</h3>
    <table class="layui-table layui-table-form">
        <tr>
            <td class="layui-td-gray">班组名称<font>*</font>
            </td>
            <td>
                <input type="text" name="name" value="{$detail.name|default=''}" lay-verify="required"
                       autocomplete="off" placeholder="请输入名称"
                       lay-reqText="请输入名称" class="layui-input">
            </td>


        </tr>

        <tr>
            <td class="layui-td-gray">状态<font>*</font>
            </td>
            <td>
                <select name="status" >
               {foreach [['id'=>1,'name'=>'启用'],['id'=>2,'name'=>'禁用']] as $st}
                    <option value="{$st.id}" {if isset($detail.status)&&$detail.status==$st.id } selected {/if}>{$st.name}</option>
                    {/foreach}
                </select>

            </td>

        </tr>
        <tr>
            <td colspan="6"><h3>明细</h3></td>
        </tr>
        <tr>
            <table class="layui-table tableMany">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>员工</th>
                    <th>分配比列</th>
                    <th>操作 <a href="javascript:" onclick="addtr()" class="layui-btn layui-btn-xs layui-btn-normal">添加</a></th>
                </tr>
                </thead>
                <tbody id="mxTbdy">
                {if isset($mxList)}
                {volist name='mxList' id='ml' key='k'}
                <tr>
                    <td> <span class="xuhao">{$k}</span> <input type="hidden" name="mxid[]" value="{$ml.id}"></td>
                    <td><select name="user_id[]" >
                        {volist name='userList' id='ul'}
                        <option value="{$ul.id}" {if $ul.id == $ml.user_id} selected {/if}>{$ul.username}</option>
                        {/volist}
                    </select></td>
                    <td>
                        <input type="number" value="{$ml.allocation_ratio}" class="layui-input " maxlength='3' required lay-verify="required" onkeyup="digitalFiltering(this,0)" placeholder="请输入比列" autocomplete="off" min="0" max="999999" name="allocation_ratio[]">
                    </td>
                    <td>
                        <a href="javascript:" class="layui-btn layui-btn-xs layui-btn-danger" onclick="delMx('{$ml.id}',this)">删除</a>
                    </td>
                </tr>
                {/volist}
                {else}
                <tr>
                    <td> <span class="xuhao">1</span> <input type="hidden" name="mxid[]" value=""></td>
                    <td><select name="user_id[]" >
                        {volist name='userList' id='ul'}
                        <option value="{$ul.id}">{$ul.username}</option>
                        {/volist}
                    </select></td>
                    <td>
                        <input type="text" class="layui-input " maxlength='9' required lay-verify="required" onkeyup="digitalFiltering(this,4)" placeholder="请输入分配比例" autocomplete="off" min="0" max="999999" name="allocation_ratio[]">
                    </td>
                    <td>
                        <a href="javascript:">删除</a>
                    </td>
                </tr>
                {/if}
                </tbody>
            </table>
        </tr>
    </table>
    <div class="py-3">
        <input type="hidden" name="id" value="{$id}">
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool'];

    function gouguInit() {
        var form = layui.form, tool = layui.tool, level = 0,upload = layui.upload;
        level = $('[name="pid"]').find('[selected=""]').attr('title');
        if (level === undefined) {
            level = 0;
        }
        //监听提交
        form.on('submit(webform)', function (data) {
            form.on('select(pid)', function (data) {
                level = data.elem[data.elem.selectedIndex].title;
            })
            let callback = function (e) {
                layer.msg(e.msg);
                if (e.code == 0) {
                    setTimeout(function () {
                        parent.parent.location.reload();
                    }, 1000);
                }
            }
            tool.post("{:url('add')}", data.field, callback);
            return false;
        });

        layui.use(['form'], function () {
            var form = layui.form;
            form.render();
        });


    }
    //明细
    function addtr() {
        var lastListItem = $('.tableMany tr:last');
        let aa=$(lastListItem).find(".xuhao")
        let len=$(aa).text()
        console.log('leng:',len)
        if (!parseInt(len)){
            len=0;
        }
        let index=parseInt(len)+1;
        let tr=" <tr>\n" +
            "                    <td> <span class=\"xuhao\">"+index+"</span> <input type=\"hidden\" name=\"mxid[]\" value=\"\"></td>\n" +
            "                    <td><select name=\"user_id[]\" >\n" +
            "                        {volist name='userList' id='ul'}\n" +
            "                        <option value=\"{$ul.id}\">{$ul.username}</option>\n" +
            "                        {/volist}\n" +
            "                    </select></td>\n" +
            "                    <td>\n" +
            "                        <input type=\"text\" class=\"layui-input \" maxlength='9' required lay-verify=\"required\" onkeyup=\"digitalFiltering(this,4)\" placeholder=\"请输入分配比例\" autocomplete=\"off\" min=\"0\" max=\"999999\" name=\"allocation_ratio[]\">\n" +
            "                    </td>\n" +
            "                    <td>\n" +
            "                        <a href=\"javascript:\" class='layui-btn layui-btn-xs layui-btn-danger' onclick='removetr(this)'>删除</a>\n" +
            "                    </td>\n" +
            "                </tr> ";
        $("#mxTbdy").append(tr)
        gouguInit()
    }
    function removetr(e) {
        $(e).parent().parent().remove()
    }
    function delMx(id='',e) {
        if (id==''){
            layer.msg('请选择数据')
            return;
        }
        $.ajax({
            url:"{:url('removeMx')}",
            type:'post',
            dataType:'json',
            data:{id:id},
            success:function (res) {
                if (res.code!=0){
                    layer.msg(res.msg)
                }else {
                    removetr(e)
                }
            },
            error(e){
                layer.msg('网络错误，请稍后')
            }
        })
    }
</script>
{/block}
<!-- /脚本 -->